<template>
  <div>
    <div class="myBox" :style="{ background: 'url(' + user.cover_text + ')' }">
      <div class="L"><img :src="user.avatar_text" /></div>
      <div class="C">
        <div class="tit">{{ user.nickname }}</div>
        <div class="sub">{{ user.email }}</div>
      </div>
    </div>

    <div class="my_order">
      <van-cell-group class="cell" :border="false">
        <van-cell class="cell" title="我的订单" value="全部" is-link to="/user/order/orders" />
      </van-cell-group>
      <div class="my_order_item">
        <van-grid clickable :column-num="5" :border="false">
          <van-grid-item class="left_order_item" text="待付款" icon="credit-pay"
            :to="{ path: '/user/order/orders', query: { status: '5' } }" />
          <van-grid-item text="待发货" icon="gift-card-o" :to="{ path: '/user/order/orders', query: { status: '1' } }" />
          <van-grid-item text="待收货" icon="logistics" :to="{ path: '/user/order/orders', query: { status: '2' } }" />
          <van-grid-item text="待评价" icon="chat-o" :to="{ path: '/user/order/orders', query: { status: '3' } }" />
          <van-grid-item class="right_order_item" text="退款" icon="after-sale" style="border-radius: 10px;"
            :to="{ path: '/user/order/orders', query: { status: '-1' } }" />
        </van-grid>
      </div>
    </div>



    <div class="part1">
      <van-grid clickable :column-num="3" :border="false">
        <van-grid-item text="基本资料" icon="description" to="/user/base/profile" class="part1_top_left" />
        <van-grid-item text="邮箱认证" icon="envelop-o" to="/user/base/email" />
        <van-grid-item icon="after-sale" text="充值" to="/user/base/pay" class="part1_top_right" />
      </van-grid>

      <van-grid clickable :column-num="3" :border="false" >
        <van-grid-item text="收货地址" icon="location-o" :to="{ name: 'AddressBase', query: { action: 'user' } }" class="part1_bottom_left"/>
        <van-grid-item icon="balance-list-o" text="消费记录" to="/user/base/record" />
        <van-grid-item icon="service-o" text="官方客服" @click="call" class="part1_bottom_right"/>
      </van-grid>
    </div>

    <van-cell title="退出" is-link @click="logout">
      <template #icon>
        <i class="fa fa-sign-out" aria-hidden="true"
          style="display: flex;align-items: center;margin: 0 3px;font-size: 16px;"></i>
      </template>
    </van-cell>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../Footer.vue";
export default {
  name: "UserBase",
  data() {
    return {
      user: {},
    };
  },
  components: {
    Footer,
  },
  methods: {
    logout() {
      this.$dialog
        .confirm({
          title: "确认退出？",
          message: "您确认退出当前登录的账号",
        })
        .then(() => {
          this.$cookies.remove("ShopUser");

          this.$toast.loading({
            message: "退出中...",
            forbidClick: true,
            duration: 1500,
            onClose: () => {
              if (this.$cookies.isKey("ShopUser")) {
                this.$notify({
                  type: "warning",
                  message: "退出失败",
                });
                return false;
              }
              this.$notify({
                type: "success",
                message: "退出成功",
                duration: 1500,
                onClose: () => {
                  this.$router.push("/");
                },
              });
            },
          });
        })
        .catch(() => { });
    },
    call() {
      this.$dialog.confirm({
        title: '联系客服',
        message: '联系客服热线：4008-123-123',
        theme: 'round-button',
        confirmButtonText: '立即拨打'
      }).then(() => {
        // on confirm
        window.location.href = 'tel://4008-123-123'
      });
    },
  },
  created() {
    this.user = this.$cookies.get("ShopUser");
  },
};
</script>

<style scoped>
.part1 {
  width: 95%;
  border-radius: 10px;
  margin: 10px auto;
  box-shadow: 0 0 15px #ccc;
}
.part1 :deep(.van-icon){
color: #f43e30;
}
.part1 :deep(.van-grid-item__text){
  color: #000;
  font-weight: 700;
}
.part1 .part1_top_left :deep(.van-grid-item__content) {
  border-top-left-radius: 10px;
}
.part1 .part1_top_right :deep(.van-grid-item__content) {
  border-top-right-radius: 10px;
}
.part1 .part1_bottom_left :deep(.van-grid-item__content) {
  border-bottom-left-radius: 10px;
}
.part1 .part1_bottom_right :deep(.van-grid-item__content) {
  border-bottom-right-radius: 10px;
}

.my_order {
  width: 95%;
  /* padding: 10px; */
  border-radius: 10px;
  margin: 10px auto;
  box-shadow: 0 0 15px #ccc;
}

.my_order .right_order_item :deep(.van-grid-item__content) {
  border-bottom-right-radius: 10px;
}

.my_order .left_order_item :deep(.van-grid-item__content) {
  border-bottom-left-radius: 10px;
}

.cell {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.my_order_item {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>